<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Deferred page floats</title>
  <style>
    @page {
      size: 600px 140px;
      margin: 10px;
    }
    :root {
      column-count: 3;
      widows: 1;
      orphans: 1;
      line-height: 20px;
      font-size: 15px;
      font-family: Arial, sans-serif;
    }
    body, p {
      margin: 0;
    }
    .float {
      border: blue solid 2px;
      height: 26px;
      float-reference: column;
      float: bottom;
    }
    .high {
      height: 56px;
    }
  </style>
</head>
<body>
<p>
  This column has 2 floats (1, 2) in it and 1 float (3) is deferred.
  <span class="float">float1</span>
  <span class="float">float2</span>
  <span class="float">float3</span>
</p>
<p>
  This column has 2 floats (3, 4) in it and 2 floats (5, 6) are deferred.
  <span class="float">float4</span>
  <span class="float">float5</span>
  <span class="float high">float6</span>
</p>
</body>
</html>
